<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--<script src="js/jquery.animate-colors.js"></script>-->
    <script src="js/jq.js"></script>
</head>
<style>
    div {
        width: 400px;
        height: 400px;
        margin: 10px auto;
        background: #cee479;
    }

    .show {
        display: block;
    }

    .hide {
        display: none;
    }
    .click{
        color: blueviolet;
        font-size: 25px;
    }
</style>
<body>
<div id="div">
    <input id="toggleStyle" type="button" value="切换模式"/>
    <input type="button" id="btn-add" value="添加div"/>
    <input id="color-style" placeholder="颜色代码" type="text"/>
    <input id="add-style" type="button" value="修改样式"/>
    <input id="pickUpCon" type="button" value="提取内容"/>
    <!--<input id="eachTest" type="button" value="遍历"/>-->
</div>
<div id="content" >
    <div style="float: right">
        <ul>
            <li class="li" style="z-index:10"><h3>水果</h3>

                    <li>苹果</li>
                    <li>香蕉</li>
                    <li>葡萄</li>

            </li>
            <span class="li">这是span</span>
            <li><h3>蔬菜 </h3>

                    <li>西红柿</li>
                    <li>土豆</li>
                    <li>四季豆</li>

            </li>
            <li><h3>米饭</h3></li>
        </ul>

    </div>

</div>
</body>
<script>
    $(document).ready(function () {
        $("#btn-add").click(function () {
            $("#content").after('<div class="addDiv"></div>');
        });
        $("#add-style").click(function () {
            var colorNum = $("#color-style").val();
            $(".addDiv").css("background-color", "#" + colorNum);
        });

        $("#toggleStyle").click(function () {
            $("#content").toggleClass('hide');
            $(".addDiv").toggleClass('show');
        })

        $('li').click(function(){
            $(this).toggleClass('click');
        })
        $("span.li").css("fontSize",'50px');

    })
</script>
</html>